<template>
<div>
  <el-card class="login_box">
    <div style="text-align: center;font-weight: bold;font-size: 20px;margin-bottom: 20px">找回密码</div>
<!--    <el-steps :active="active" finish-status="success">-->
<!--      <el-step title="身份验证"></el-step>-->
<!--      <el-step title="设置新的密码"></el-step>-->
<!--    </el-steps>-->
    <el-form :model="loginForm" label-position="bottom" label-width="130px" ref="loginFormRef" :rules="loginFormRules">
      <el-form-item label="输入手机号" prop="mgMobile">
        <el-input prefix-icon="iconfont icon-shouji" v-model="loginForm.mgMobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="设置新的密码" prop="mgPwd">
        <el-input type="password" prefix-icon="iconfont icon-suo" v-model="loginForm.mgPwd" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="再次确定密码" prop="mgPwd">
        <el-input type="password" prefix-icon="iconfont icon-suo" v-model="mgAgainPwd" placeholder="请输入密码"></el-input>
<!--        <div  :class="[flag? 'show' : 'yincang']">-->
          <el-alert :class="[flag? 'show' : 'yincang']"
            title="错误提示的文案"
            type="error"
          ></el-alert>
<!--        </div>-->
      </el-form-item>
      <el-form-item>
        <el-button style="background-color: #dd2726;color: #fff;width:230px;" @click="modify">确定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
var checkMobile = (rule, value, cb) => {
  let regMobile = /^1[3|4|5|7|8][0-9]\d{8}$/
  if (regMobile.test(value)) return cb()
  cb(new Error('请输入合法的手机'))
}
export default {
  name: 'findPwd',
  data () {
    return {
      mgAgainPwd: '',
      flag: false,
      loginForm: {
        mgMobile: '',
        mgPwd: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        // 验证密码是否合法
        mgPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
        ],
        mgMobile: [
          {
            required: true, message: '请输入手机', trigger: 'blur'
          },
          {
            validator: checkMobile, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    modify () {
      if (this.loginForm.mgPwd !== this.mgAgainPwd) {
        this.flag = true
      } else {
        this.flag = false
        this.$axios.post('findPwd', this.loginForm)
          .then(resp => {
            if (resp.data.status !== 200) return this.$message.error('更改密码失败')
            this.$router.push({path: '/findPwdSuccess'})
            return this.$success.error('更改密码成功')
          })
      }
    }
  }
}
</script>

<style scoped>
.login_box{
  margin-top: 40px;
  margin-bottom: 40px;
  width:400px;
  height:350px;
  background-color:#fff;
  border-radius: 3px;
  margin-right:250px;
}
.show{
  height: 10px;
}
.yincang {
  display: none;
}
</style>
